<template>
    <div>
        <div class="tableHead">
            <div>
                <el-button size="small" type="warning" @click="openMoreShop" :disabled="openArr.length === 0">
                    批量解禁
                </el-button>
                <el-button size="small" @click="goBackShopList" :disabled="goSearch">
                    返回商铺列表
                </el-button>
            </div>
            <el-row>
                <el-col>
                    <el-input v-model="searchInput" placeholder="请输入搜索内容" size="small" style="width:250px"></el-input>
                    <el-button @click="searchShop" size="small" type="success" icon="el-icon-search"></el-button>
                </el-col>
            </el-row>
        </div>
        <el-table :data="tableData" height="500px" stripe @selection-change="handleSelectionChange">
            <el-table-column type="selection"></el-table-column>
            <el-table-column label="名称" prop="shopName"></el-table-column>
            <el-table-column label="经营者账号"></el-table-column>
            <el-table-column label="封禁原因" prop="banReason"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="small" type="primary" @click="openCheck(scope.row)">查看</el-button>
                    <el-button size="small" type="warning" @click="openShop(scope.row.shopId)">解禁</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageStart"
            :page-size="pageSize"
            :page-sizes="[10, 20, 30]"
            layout="sizes, prev, pager, next"
            :total="total"
        >
        </el-pagination>
        <!-- 查看被禁商铺信息 -->
        <el-dialog :visible.sync="dialogVisible" title="查看店铺信息" width="30%">
            <el-form :model="checkForm">
                <el-form-item label="名称">
                    <el-input :disabled="true" v-model="checkForm.shopName"></el-input>
                </el-form-item>
                <el-form-item label="经营者账号">
                    <el-input :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="封禁原因">
                    <el-input :disabled="true" v-model="checkForm.banReason"></el-input>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import {getShopListClose,openMoreShopStart,searchBanShop} from '../../../api/commonReq/admin/shop/data.js'
export default{
    data() {
        return {
            tableData:[],
            openArr:[],
            searchInput:'',
            pageStart:1,
            pageSize:10,
            total:0,
            dialogVisible:false,
            checkForm:{},
            goSearch:true
        }
    },
    created(){
        this.getShopList()
    },
    methods:{
        //渲染列表
        getShopList(){
            // this.$http({
            //     url:'/shops/admin/selectBanShop',
            //     method:'GET',
            //     params:{
            //         page:this.pageStart,
            //         size:this.pageSize
            //     },
            //     headers:{
            //         'Authorization': cookie.getToken()
            //     }
            // }).then( data => {
            //     this.tableData = data.data.data.date
            //     this.total = data.data.data.total
            // }).catch(err => {
            //     console.log(err);
            // })
            getShopListClose({
                page:this.pageStart,
                size:this.pageSize
            }).then(data=>{
                this.tableData = data.data.data.date
                this.total = data.data.data.total
            })
        },
        //改变一页展示的数量
        handleSizeChange(newSize){
            this.pageSize = newSize
        },
        //改变当前页
        handleCurrentChange(newPage){
            this.pageStart = newPage
        },
        //批量解禁
        handleSelectionChange(val){
            this.openArr = val
        },
        openMoreShop(){
            let openData = this.openArr.map(item => {
                const {userId} = item
                console.log(userId);
                return(userId)
            })
            this.$confirm('您将解禁这些商铺, 请慎重考虑', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // this.$http({
                //     url:'/shops/admin/unBanShop',
                //     method:'DELETE',
                //     params:{
                //         shopIds:openData
                //     },
                //     paramsSerializer: params => {
                //     return qs.stringify(params, { indices: false })  //直接传数组传不过去，这样传才会每一个id值都匹配在路径上
                //     },
                //     headers:{
                //         'Authorization':cookie.getToken()
                //     }
                // }).then( data => {
                //     console.log(data);
                //     this.$message({
                //         type: 'success',
                //         message: '解禁成功!'
                //     });
                // }).catch( err=> {
                //     console.log(err);
                // })
                openMoreShopStart({
                    shopIds:openData
                }).then(data=>{
                    console.log(data);
                    this.$message({
                        type: 'success',
                        message: '解禁成功!'
                    });
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消解禁'
                });          
            });
        },
        goBackShopList(){
            this.goSearch = true
            this.getShopList()
        },
        searchShop(){
            if(this.searchInput === ''){
                this.$message({
                    type:'warning',
                    message:'请输入搜索内容'
                })
            }else{
                // this.$http({
                //     url:'/shops/admin/selectBanShop',
                //     method:'GET',
                //     params:{
                //         information:this.searchInput
                //     },
                //     headers:{
                //         'Authorization': cookie.getToken()
                //     }
                // }).then(data => {
                //     console.log(data);
                //     this.tableData = data.data.data.date
                //     this.total = data.data.data.total
                //     this.goSearch = false
                // }).catch( err=> {
                //     console.log(err);
                // })
                searchBanShop({
                    information:this.searchInput
                }).then(data=>{
                    this.tableData = data.data.data.date
                    this.total = data.data.data.total
                    this.goSearch = false
                })
            }
        },
        openCheck(row){
            this.dialogVisible = true
            this.checkForm = Object.assign({}, row)
        },
        openShop(shopId){
            this.$confirm('您确定解禁该商铺吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http({
                    url:'/shops/admin/unBanShop',
                    method:'DELETE',
                    params:{
                        shopIds:shopId
                    },
                    headers:{
                        'Authorization': cookie.getToken()
                    }
                }).then(data => {
                     this.$message({
                        type: 'success',
                        message: '解禁成功!'
                    });
                    this.getShopList()
                }).catch(err => {
                    console.log(err);
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        }
    }
}
</script>

<style scoped>

</style>